<template>
	<view class="container">
		<view class="header">
			<view class="" :style="'height:'+barHeight+'px'">

			</view>
			<view class="align-center plr12 justify-between " :style="'height: 70rpx;padding-right:260rpx'">
				<view class="align-center">
					<image src="../../static/images/dw2.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					福建省
				</view>
				<navigator url="/pages/messagelist/index" hover-class="none" class="posRelative " style="margin-right: 4rpx;">
					<image src="../../static/images/mes.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
					<text class="posAbsort mes">1</text>
				</navigator>
			</view>
			<view class="" style="height: 16rpx;">
				
			</view>
		</view>
		<view class="" style="height: 196rpx;">

		</view>
		<view class="justify-center">
			<image style="width: 714rpx;" src="../../static/images/buyVip.png" mode="widthFix"></image>
		</view>
		<view class="vipBuyList bgWhite plr16">
			<view class="align-center justify-between ">
				<view v-for="(i,n) in buyList" :key="b" :class="n==buyAct?'buyact buybox':'buybox' ">
					<view class="title">
						{{i.title}}年VIP
					</view>
					<view class="price">
						<text>￥</text>{{i.price}}
					</view>
					<view class="" v-if="n==buyAct" style="height: 36rpx;">
						
					</view>
					<view class="actBottom" v-if="n==buyAct">
						每天低至0.5元
					</view>
					
					<view class="personal" v-else>
						{{i.personal}}元/天
					</view>	
				</view>
			</view>
			<view class="buy">
				确认并支付
			</view>
			<view class="mt12" style="width: 420rpx;margin: 24rpx auto 0;">
				<uv-checkbox-group v-model="checkboxValue">
							<uv-checkbox 
								
								:name="1"
							>
							<view class="ft12" style="color:rgba(0, 0, 0, .4) ;">
								购买即视为确认<text style="color:rgba(0, 0, 0, .7) ;">《用户服务协议》</text>
							</view>
							
							</uv-checkbox>
						</uv-checkbox-group>
			</view>
			
		</view>
		<image style="width: 100%;" class="mt12" src="../../static/images/Frame 184.png" mode="widthFix"></image>
		<view class="" style="height: 40rpx;">
			
		</view>
		<customTab :active="2"></customTab>
	</view>
</template>

<script>
	let app = getApp();
	import customTab from '../../components/customTab.vue';
	export default {
		components: {
customTab
		},
		data() {
			return {
				act: 0,
				dataInfo: {},
				reportNum: '',
				keyWord: "",
				barHeight: 0,
				buyList:[
					{
						title:'1年',
						price:'199',
						personal:'0.66'
					},
					{
						title:'2年',
						price:'199',
						personal:'0.66'
					},
					{
						title:'三年',
						price:'199',
						personal:'0.66'
					}
				],
				buyAct:1,
				tabact:0,
				checkboxValue:[1]
			}
		},
		onLoad(opt) {


		},
		onShow() {
			uni.hideTabBar()
			console.log(uni.getStorageSync('menuInfo'))
			this.barHeight = uni.getStorageSync('menuInfo').menuTop
		},
		mounted() {


		},

		methods: {

			click(item) {
				console.log('item', item);
			}
		}





	}
</script>
<style scoped lang="scss">
	.header {
		background-color: #228CFC;
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		.mes {
			background-color: #D54941;
			color: #fff;
			width: 32rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
			top: -16rpx;
			right: -16rpx;
			border-radius: 50%;
			font-size: 20rpx;
		}
	}

	.search {
		border: 1px solid #228CFC;
		border-radius: 60rpx;
		height: 76rpx;
		padding: 0 10rpx 0 30rpx;

		.searchicon {
			background-color: #228CFC;
			width: 96rpx;
			height: 60rpx;
			border-radius: 60rpx;
			text-align: center;
		}
	}
		
	.tabs{
		height: 96rpx;
		font-size: 28rpx;
		color: #000;
		view{
			flex:1;
			text-align: center;
			
		}
		.act{
			color: #228CFC;
			position: relative;
		}
		.act::before{
			clear: both;
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: -40rpx;
			width: 32rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background-color: #228CFC;
		}
	}
		
	.news{
		font-size: 32rpx;
		color: #000;
		margin-top: 32rpx;
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid rgba(243, 243, 243, 1);
		line-height: 44rpx;
		text{
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.6);
			display: block;
		}
		.time{
			color: rgba(0, 0, 0, 0.4);
			font-size: 20rpx;
		}
	}
	.vipBuyList{
		padding: 32rpx;
	}
	.buybox{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			border-radius: 16rpx;
			border: 1px solid var(--Gray-Gray3, #E7E7E7);
			padding: 24rpx 32rpx;
			color: var(--text-icon-font-gy-340, rgba(0, 0, 0, 0.40));
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
			
			
			line-height: 44rpx; /* 183.333% */
			.price{
				margin: 20rpx 0;
				color: #228CFC;
				font-size: 40rpx;
				text{
					font-size: 28rpx;
				}
			}
			.title{
				font-size: 32rpx;
				color: var(--text-icon-font-gy-190, rgba(0, 0, 0, 0.90));
			
				line-height: 22px; /* 137.5% */
			}
	}
	.buyact{
		width: 254rpx;
		border-radius: 8px;
		border: 1px solid var(--Brand-Brand6-Hover, #228CFC);
		background: var(--Brand-Brand1-Light, #F0F9FF);
		position: relative;	
		height: 232rpx;
	}
	.actBottom{
			position: absolute;
			bottom: 0;
			width: 100%;
			border-radius: 0 0 14rpx 14rpx;
			background-color: #228CFC;
			color: #fff;
			left: 0;
			height: 60rpx;
			line-height: 60rpx;
	}
	.buy{
		width: 686rpx;
		height: 96rpx;
		text-align: center;
		background-color: #228CFC;
		font-size: 32rpx;
		color: #fff;
		line-height: 96rpx;
		border-radius: 12rpx;
		margin-top: 32rpx;
	}
</style>